import React, { Component } from 'react'

import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'

import styles from './index.module.css'

// 标题高亮状态
// true 表示高亮； false 表示不高亮
const titleSelectedStatus = {
  area: false,
  mode: false,
  price: false,
  more: false
}

export default class Filter extends Component {
  state = {
    titleSelectedStatus,
    openType: ''
  }

  onTitleClick = type => {
    this.setState(prevState => {
      return {
        titleSelectedStatus: {
          ...prevState.titleSelectedStatus,
          [type]: true
        },
        openType: type
      }
    })
  }

  cancel = () => {
    this.setState({
      openType: ''
    })
  }

  render() {
    const { titleSelectedStatus, openType } = this.state

    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        { openType === 'area' || openType === 'mode' || openType === 'price' ? <div className={styles.mask} onClick={this.cancel}/> : ''}

        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle
            titleSelectedStatus={titleSelectedStatus}
            onClick={this.onTitleClick}
          />

          {/* 前三个菜单对应的内容： */}
          {openType === 'area' || openType === 'mode' || openType === 'price' ? <FilterPicker cancel={this.cancel}/> : ''}

          {/* 最后一个菜单对应的内容： */}
          {/* <FilterMore /> */}
        </div>
      </div>
    )
  }
}
